import React, { Component } from 'react';
import classNames from 'classnames'
import '../css/FloatActionButton.css'

/**
 * 底部浮动展示或隐藏Button
 */
class FloatActionButton extends Component {

    constructor(props, context) {
        super(props, context);
        let show = this.props.show
        let appLogo = localStorage.getItem('app_logo')
        this.state = {
            show:show,
            isUp:false,
            appLogo:appLogo
        }
    }

    componentWillReceiveProps(nextProps) {
        if(this.state.show !== nextProps.show) {
            this.setState({
                show:nextProps.show,
                appLogo:localStorage.getItem('app_logo')
            });
        }
    }

    handleFloatAction(){
        this.props.floatAction()
        this.setState({isUp:!this.state.isUp});
    }

    render() {
        let cln = 'fab-hidden'
        if(this.state.show) {
            cln = this.state.isUp ? "fab-up":"fab-down"
        }
        return (
            <div className={classNames('fab',cln)} onClick={this.handleFloatAction.bind(this)}>
                <img className="fab-img" src={this.state.appLogo} onClick={this.handleFloatAction.bind(this)} alt=""/>
            </div>
        );
    }
}

export default FloatActionButton;